<template>
	<view>
		<view class="loadingstyle"  v-if="!loading">
			<u-loading-page loading-color="#DCB490" :loading="true" loading-text="火速加载中..."></u-loading-page>
		</view>
		<view v-if="loading">
			<!-- 轮播 -->
			<u-swiper :list="detailmsg.images" height="250" @change="e => currentNum = e.current" :autoplay="false"
				indicatorStyle="right: 20px" imgMode="aspectFit">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ detailmsg.images.length }}</text>
				</view>
			</u-swiper>
			<!-- 购买时长 -->
			<view class="goumai mainpadding">
				<view class="flexbetween">
					<view class="tianshu">￥{{detailmsg.salesprice}}</view>
					<view class="yishou">已售：{{detailmsg.total_num}}件</view>
				</view>
				<view class="xianshi">{{detailmsg.name}}
					<text class="jiesuo">（解锁即可体验刷题功能）</text>
				</view>
				<view class="xiangq">点击购买即可解锁刷题功能，体验检测模式和复习模式，迅速提升自我</view>
				<u-parse :content="detailmsg.content"></u-parse>
				<!-- <view class="bigimag margin_top" v-for="item in 3">
					<image src="../../static/image/shili/shili3.png" mode=""></image>
				</view> -->
			</view>
			<!-- 底部购买 -->
			<view class="bottombox">
				<view class="zhuyi">注：购买课程可在个人中心查看，一旦购买概不退换。</view>
				<view class="tuiku mainpadding margin_top" @click="buy">购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				currentNum: 0,
				listid: "",
				detailmsg: {},
				buymsg: {},
				wxpay:{},
				loading:false
			}
		},
		onLoad(options) {
			this.listid = options.id
		},
		onShow() {
			this.init()
		},
		methods: {
			// 获取当前课程详情
			init() {
				httpRequest.request('/api/course/detail', 'POST', {
					course_id: this.listid
				}).then(resp => {
					this.detailmsg = resp.data
					this.loading = true
				})
			},
			// 购买 => 调用支付接口 => 调起微信支付
			buy() {
				httpRequest.request('/api/course_order/create_order', 'POST', {
					course_id: this.listid
				}).then(resp => {
					if(resp.code==1){
						this.buymsg = resp.data
						this.pay()
					}else{
						httpRequest.toast(resp.msg)
					}
				})
			},
			// 课程支付接口
			pay() {
				httpRequest.request('/api/pay/pay', 'POST', {
					type: "course",
					platform: "wxmini",
					order_id: this.buymsg.id,
					pay_type: 1
				}).then(resp => {
					this.wxpay = resp.data
					this.callPayMent()
				})
			},
			// 调用微信支付接口
			callPayMent() {
				let _this = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: _this.wxpay.timeStamp,
					nonceStr: _this.wxpay.nonceStr,
					package: _this.wxpay.package,
					signType: _this.wxpay.signType,
					paySign: _this.wxpay.paySign,
					success: function(res) {
						// 支付成功
						uni.navigateBack({
							delta:1
						})
					},
					fail: function(err) {
						// 支付失败
						// _this.paycatchresult = true
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goumai {
		padding-bottom: 300rpx;
	}

	.zhuyi {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		text-align: center;
	}

	.bottombox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(51, 51, 51, 0.1000);
		box-sizing: border-box;
		padding: 30rpx 30rpx 70rpx;
	}

	.bigimag {
		height: 265rpx;
		width: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.xiangq {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.xianshi {
		font-size: 30rpx;
		margin: 60rpx 0;
		font-family: MicrosoftYaHei-Bold;
		font-weight: bold;
		color: #333333;
	}

	.jiesuo {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
	}

	.yishou {
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.tianshu {
		font-size: 46rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #FF3939;
	}

	//轮播视频图片样式
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>
